<script setup>
import { ref } from 'vue';
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

// 中间状态，用于兄弟组件间数据传递
const sharedData = ref('');

// 从SiblingA接收数据
const handleFromSiblingA = (data) => {
  sharedData.value = data;
};

// 从SiblingB接收数据
const handleFromSiblingB = (data) => {
  sharedData.value = data;
};
</script>

<template>
  <div class="sibling-comm">
    <div class="parent-broker">
      <h4>父组件作为消息代理</h4>
      <div class="shared-data">
        <strong>共享数据：</strong>
        <span class="data-value">{{ sharedData || '暂无数据' }}</span>
      </div>
    </div>
    
    <div class="siblings-container">
      <SiblingA @send-data="handleFromSiblingA" :shared-data="sharedData" />
      <div class="arrow">⟷</div>
      <SiblingB @send-data="handleFromSiblingB" :shared-data="sharedData" />
    </div>
  </div>
</template>

<style scoped>
.sibling-comm {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.parent-broker {
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.parent-broker h4 {
  margin-bottom: 0.5rem;
  color: #1565c0;
}

.shared-data {
  font-size: 1rem;
}

.data-value {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #bbdefb;
  margin-left: 0.5rem;
}

.siblings-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.arrow {
  font-size: 2rem;
  color: #667eea;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .siblings-container {
    flex-direction: column;
  }
  
  .arrow {
    transform: rotate(90deg);
  }
}
</style>